@import "@/common/styles/colors"

.data-helper

  h2
    margin: 0 0 0.5rem
    color: $subtext

  p
    margin: 0
    color: $subtext


  .speeds
    display: flex
    justify-content: center
    gap: 2rem
    margin-top: 1rem

    .speed
      display: flex
      flex-direction: column
      align-items: center

      input
        box-sizing: border-box
        width: 100%

      .speed-header
        display: flex
        align-items: center
        margin-bottom: 0.5rem

        svg
          font-size: 28pt
          margin-right: 0.5rem
          color: $green

        .speed-text h2
          margin: 0
          color: $subtext

        .speed-text p
          margin: 0
          color: $subtext


@media screen and (max-width: 600px)
  .data-helper .speeds
    flex-direction: column
    gap: 1rem
    margin-top: 0.5rem

    .speed
      width: 100%
      flex-direction: row
      justify-content: space-between

      input
        width: 50%